<template>
    <div class="content">
        <el-form :model="form" status-icon ref="form" label-width="100px" class="demo-ruleForm">
            <el-form-item label="账号id" prop="accountId" style="width:380px">
                <el-input type="input" v-model="form.accountId" autocomplete="off" placeholder="请输入账号id"></el-input>
            </el-form-item>

            <el-form-item label="账号名" prop="accountName" style="width:380px">
                <el-input type="input" v-model="form.accountName" autocomplete="off" placeholder="请输入账号名"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password" style="width:380px">
                <el-input type="password" v-model="form.password" autocomplete="off" placeholder="请输入密码"></el-input>
            </el-form-item>

            <el-form-item label="姓名" prop="username" style="width:380px">
                <el-input type="input" v-model="form.username" autocomplete="off" placeholder="请输入姓名"></el-input>
            </el-form-item>

            <el-form-item label="电话号码" prop="telephone" style="width:380px">
                <el-input type="input" v-model="form.telephone" autocomplete="off" placeholder="请输入电话号码"></el-input>
            </el-form-item>
            <el-form-item style="width:380px">
                <el-button @click="register()" type="primary" style="width:280px">注册</el-button>
                <!-- <el-button @click="toLogin()" type="primary">去登录</el-button> -->
            </el-form-item>
            <el-form-item style="width:380px">
                <div class="go-login-wrapper">
                    <span @click="toLogin()">去登陆</span>
                </div>
            </el-form-item>

        </el-form>

    </div>
</template>

<script>
import axios from "/src/utils/api";

export default {
    name: "Register",
    data() {
        return {
            form: {
                accountId: '',
                accountName: '',
                password: '',
                username: '',
                telephone: ''
            },
        };
    },
    methods: {
        register() {
            const self = this;
            axios.post(axios.defaults.baseURL + "/register", this.form).then(function (response) {
                if (response.data.data === 0) {
                    alert("账号已被注册，请重新输入！")
                } else {
                    alert("注册成功")
                    self.$router.push('/')
                }
            }).catch(function (error) {
                alert(error);
                console.log(error);
            })
        },
        toLogin() {
            const self = this;
            self.$router.push('/')
        }
    }

}
</script>

<style scoped>
.content {
    width: 100%;
    height: 100%;
    background-image: url("../assets/img/background.webp");
    background-size: 100% 100%;
}

.el-form {
    padding-top: 30px;
    background-color: white;
    width: 450px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    box-shadow: 5px 5px 5px #888888;

}

.go-login-wrapper {
    display: flex;
    justify-content: flex-end;
}

.go-login-wrapper span {
    cursor: pointer;
    color: rgb(5, 186, 247);
    line-height: 20px;
}
</style>